
<script>

import list_remote from './mixin/list_remote'
export default {
  name: 'checkbox_group_auto',
  mixins: [list_remote],
  render: function (h) {
    let props = Object.assign({ value: this.select, }, this.$attrs, this.attrs)
    return h('el-checkbox-group', { props, on: { input: (e) => this._emitValue(e) }, },
     this._actualList.map((it, i) => { return h('el-checkbox', this._childItemProps(it, i), it._label) }))
  },
  data() {
    return {
    }
  },
  props: {
    value: {
      type: [String, Array],
      default: "",
    },
    border: Boolean,
    attrs: Object,
  },
  computed: {
    select() {
      if (this.value instanceof String) {
        return _.split(_.trim(this.value), ',')
      } else if (this.value instanceof Array) {
        return this.value
      } else {
        return []
      }
    },
  },
  methods: {
    _emitValue(value, list) {
      if (!list) list = ['input', 'change']
      list.forEach(key => {
        if (key == 'changeItem') {
          if (value instanceof Array) {
            this.$emit(key, value.map(v => _.find(this._actualList, (it) => it == v || it._value == v)))
          } else {
            this.$emit(key, _.find(this._actualList, (it) => it == value || it._value == value))
          }
        } else {
          this.$emit(key, value)
        }
      })
    },
    _childItemProps(it, i) {
      let label = it._label
      let value = it._value
      return { props: { disabled: !!it.disabled, label: value, border: this.border }, key: value }
    },
  }
}
</script>
<style ></style>
